﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日志管理</title>
<link href="css/blog_manage.css" rel="stylesheet" type="text/css" media="all">
  <script  type="text/javascript" src="js/axios.min.js"></script>
  <script  type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  <script  type="text/javascript" src="js/vue.min.js"></script>


</head>

<body>
<div id="div1">


<div id="head">

</div>


<div id="body" >
<h1>日志管理</h1>
  <div>
    <span v-for="index in entryPageInfo.pages">
      <!--
         分页具体操作改动
      -->

    </span>
    <span>
      <a href="blog_menu.html">回到主页面</a>
      <button @click="findlist(entryPageInfo.prePage)">下一页</button>
        <button @click="findlist(entryPageInfo.nextPage)">下一页</button>
       </span>
  </div>

<table width="100%" border="1" cellspacing="0" cellpadding="0">


  <tr>
    <td height="30">&nbsp;标题</td>
    <td>&nbsp;发表时间</td>
    <td>&nbsp;操作</td>
  </tr>
  <tr v-for="entry in entryPageInfo.list">
    <td height="30" >&nbsp;{{entry.title}}</td>
    <td>&nbsp;{{entry.posttime}}</td>
    <td>&nbsp;
      <a href="#" @click="deletelist(entry.id)">删除</a>|
      <a href="#" @click="setEntryId(entry.id)">修改</a>
      </td>
  </tr>

</table>
<br /><br />
</div>

<div id="foot">
<hr />
<center>Copyright &copy; 2013-2020</center>
</div>
</div>


</div>
</body>
</html>
<!--
  axios
-->
<script  >
  //vue对象
  var vm=new Vue({
    //辐射区域
    el:"#div1",
    // json字符串
    data:{
      id:"",
      entryPageInfo:""
    },
    created(){
      //刚创建vue对象没有渲染页面时候执行方法
      this.findlist(1);


    },
    //钩子函数
    methods:{
      setEntryId:function(entryId){
        alert("entryId---->"+entryId)
        axios.get("/setEntryId/"+entryId,null).then(function (obj) {
          if (obj.status==200){
            alert(obj.data.msg);
            location.href="blog_update.html"
          }
        }).catch(function () {
            alert("setEntryId()---出现了错误")
        })
      },


      findlist:function (npage) {
        //ajax传递数据
        var path="/queryAllEntry/"+npage;
        axios.get(path,null).then(function (obj) {
          //根据obj中的status中的状态码看
          if (obj.status==200){
            //成功开始调用  后端代码
            var PageResult    =obj.data;
            //取出集合 赋值给前端属性
            vm. entryPageInfo  =PageResult.result;
          }
        }).catch(function ( ) {
          alert("查询失败")
        })
      },
      deletelist:function (id) {
        //判断用户是不是删除
        if (!confirm("确定要删除")){
          return;
        }
        //向后端传递的参数 var path
        var path="/removeEntry/"+id;
        //
        axios.delete(path,null).then(function (obj) {
          //判断obj状态码
          if (obj.status=200){
            //成功去取数据
            var  PageResult  =obj.data;
            alert(PageResult.msg)
            //再查询 数据 数据已经更改
            vm.findlist(1);
          }
        }).catch(function () {
          alert("删除失败-----------》")
        })
      }

    }
  });
</script>